<template>

    <el-aside>

        <el-col :span="24">
            <el-menu 
                default-active="2" 
                class="el-menu-vertical-demo" 
                background-color="#545c64" 
                text-color="#fff"
                active-text-color="#ffd04b" 
                v-for="menu in menuList" 
                :key="menu.id"
                :class="{'active-checked': menu.controller == route.meta.controller}">
                <el-submenu 
                    :index="menu.id + '-' + menu.id" 
                    v-if="menu.children">
                    <template slot="title">
                        <span>{{ menu.title }}</span>
                    </template>
                    <el-menu-item-group 
                        v-for="child in menu.children" 
                        :key="child.id">
                        <el-menu-item 
                            :index="child.id + '-' + child.id">
                            <router-link 
                                active-class="active" 
                                v-if="menu.children" 
                                :to="'/admin/' + child.controller + '/' + child.action">
                                {{ child.title }}
                            </router-link>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-menu-item 
                    :index="menu.id + '-' + menu.id" 
                    v-if="menu.children == null">
                    <router-link 
                        active-class="active" 
                        :to="'/admin/' + menu.controller + '/' + menu.action">
                        {{ menu.title }}
                    </router-link>
                </el-menu-item>
            </el-menu>
        </el-col>

    </el-aside>

</template>

<script>
import { dataInteraction } from '@/utils/auth';

export default {
    name: 'HomePage',
    data() {
        return {
            menuList: [],
            route: this.$route
        }
    },
    components: {

    },
    created() {
        this.initMenu()
    },
    methods: {
        initMenu() {
            var resData = dataInteraction('/tr/api/menu/getMenu', {})
            resData.then(res => {
                this.menuList = res.data
                console.log(this.menuList)
            })
        },
        handleChange(val) {
            console.log(val);
        },
        stopClick(){
           return false;
        }
    }
}
</script>

<style>
.active {
    background: linear-gradient(90deg, #B30C33, #720720)!important;
    color: #FFFFFF;
}

.aside-main {
    padding-top: 5px;
    background: #F5F5F5;
}

.el-aside,
.el-main {
    background-color: #FFFFFF;
    border-radius: 10px;
}

.el-aside {
    width: 160px !important;
    color: #333;
    text-align: center;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

a {
    display: block;
    text-align: left;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    color: #FFFFFF;
}
.el-menu-item, .el-submenu__title{
    height: 30px;
    line-height: 30px;
    padding: 0px !important;
}
.el-submenu__title span{
    display: block;
    text-align: left;
    padding: 0 10px;
}
.el-submenu .el-menu{
    background: #666666;
}
.el-submenu .el-menu-item{
    height: 30px;
    line-height: 30px;
    padding: 0px !important;
    min-width: 100%;
}
.is-active ul{
    display: block;
}
.el-menu-item-group__title{
    padding: 1px;
}

.el-collapse {
    font-size: 13px;
    text-align: left;
    /* padding: 0 10px; */
    line-height: 40px;
    color: #333;
    font-weight: 600;
    cursor: pointer;
}

/* .el-collapse:hover,
.el-submenu .el-menu-item:hover,
.el-menu-item:hover
.el-menu-item a:hover {
    background: linear-gradient(-90deg, #B30C33, #720720)!important;
    opacity: 0.8;
} */

.el-collapse a {
    display: block;
    padding: 0 10px;
}
.el-menu-item-group .el-menu-item a{
    padding: 0 20px;
    background: #666666;
}

.el-collapse a:hover,
.el-collapse-item__header:hover,
.el-collapse-item__header.is-active,
.child-title a:hover {
    color: #FFFFFF;
    font-weight: 800;
}

.el-collapse-item__header {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}

.el-collapse-item__wrap {
    display: block !important;
}

.el-collapse-item__content {
    padding: 0;
}

.parent-title {
    line-height: 40px;
}


.active-checked ul{
    display: block!important;;
}

</style>